<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎣 钓鱼小程序产品流程图</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
            background: #f5f7fa; 
            padding: 20px; 
            line-height: 1.6;
        }
        .header { 
            text-align: center; 
            margin-bottom: 30px; 
            background: white; 
            padding: 30px; 
            border-radius: 12px; 
            box-shadow: 0 2px 12px rgba(0,0,0,0.1); 
        }
        .header h1 { 
            color: #3498DB; 
            font-size: 28px; 
            margin-bottom: 10px; 
        }
        .header p { 
            color: #666; 
            font-size: 16px; 
        }
        .flow-section { 
            background: white; 
            border-radius: 12px; 
            padding: 25px; 
            margin-bottom: 20px; 
            box-shadow: 0 2px 12px rgba(0,0,0,0.1); 
        }
        .flow-section h2 { 
            color: #2c3e50; 
            font-size: 20px; 
            margin-bottom: 15px; 
            border-bottom: 2px solid #3498DB; 
            padding-bottom: 8px; 
        }
        .mermaid { 
            text-align: center; 
            margin: 20px 0; 
        }
        .flow-description {
            background: #ecf0f1;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 14px;
            color: #2c3e50;
        }
        .module-tag { 
            background: #e74c3c; 
            color: white; 
            padding: 4px 8px; 
            border-radius: 4px; 
            font-size: 12px; 
            margin-bottom: 10px; 
            display: inline-block; 
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🎣 钓鱼小程序产品流程图</h1>
        <p>专业的钓鱼服务平台 | 完整业务流程设计</p>
    </div>

    <div class="flow-section">
        <div class="module-tag">整体业务流程</div>
        <h2>1. 钓鱼小程序整体业务流程</h2>
        <div class="mermaid">
graph TD
    A[用户进入小程序] --> B[微信授权登录]
    B --> C[进入首页]
    C --> D{选择功能模块}
    
    D -->|入场券| E[浏览入场券列表]
    D -->|商城| F[浏览渔具商城]
    D -->|沸点| G[查看钓友动态]
    D -->|个人中心| H[个人信息管理]
    
    E --> E1[选择入场券]
    E1 --> E2[确认订单]
    E2 --> E3[支付下单]
    E3 --> E4[获得入场券]
    E4 --> E5[扫码入场]
    E5 --> E6[开始钓鱼计时]
    E6 --> E7[记录钓鱼成果]
    E7 --> E8[结束钓鱼]
    E8 --> E9[分享到沸点]
    
    F --> F1[选择商品]
    F1 --> F2[加入购物车]
    F2 --> F3[确认订单]
    F3 --> F4[填写收货地址]
    F4 --> F5[支付下单]
    F5 --> F6[商家发货]
    F6 --> F7[确认收货]
    
    G --> G1[查看动态列表]
    G1 --> G2[点赞/评论/分享]
    G2 --> G3[发布新动态]
    G3 --> G4[上传图片/视频]
    G4 --> G5[添加位置/话题]
    G5 --> G6[发布成功]
    
    H --> H1[查看个人信息]
    H1 --> H2{选择功能}
    H2 -->|订单管理| H3[查看我的订单]
    H2 -->|入场券| H4[查看我的入场券]
    H2 -->|地址管理| H5[管理收货地址]
    H2 -->|会员中心| H6[购买会员服务]
    H2 -->|钓鱼记录| H7[查看钓鱼记录]
    
    style A fill:#3498DB,stroke:#2980B9,color:#fff
    style E4 fill:#27AE60,stroke:#229954,color:#fff
    style F7 fill:#27AE60,stroke:#229954,color:#fff
    style G6 fill:#27AE60,stroke:#229954,color:#fff
    style E9 fill:#E74C3C,stroke:#C0392B,color:#fff
        </div>
        <div class="flow-description">
            <strong>流程说明：</strong>用户通过微信授权登录后，可以选择四大核心功能模块：入场券购买与使用、渔具商城购物、沸点社区互动、个人中心管理。每个模块都有完整的业务闭环，最终通过社区分享形成用户粘性。
        </div>
    </div>

    <div class="flow-section">
        <div class="module-tag">入场券业务</div>
        <h2>2. 入场券购买与使用流程</h2>
        <div class="mermaid">
graph TD
    A[进入入场券页面] --> B[浏览券种列表]
    B --> C[筛选条件]
    C --> D[选择入场券]
    D --> E[查看券种详情]
    E --> F{是否购买}
    
    F -->|否| B
    F -->|是| G[进入订单确认页]
    G --> H[填写使用信息]
    H --> I[选择支付方式]
    I --> J[确认支付]
    J --> K{支付结果}
    
    K -->|失败| L[支付失败页面]
    L --> I
    K -->|成功| M[支付成功]
    M --> N[生成入场券]
    N --> O[生成二维码]
    O --> P[券码发送到个人中心]
    
    P --> Q[到达钓点]
    Q --> R[出示二维码]
    R --> S[管理员扫码验证]
    S --> T{验证结果}
    
    T -->|无效| U[显示错误信息]
    T -->|有效| V[入场成功]
    V --> W[启动钓鱼计时器]
    W --> X[开始钓鱼]
    X --> Y[实时记录钓鱼数据]
    Y --> Z[结束钓鱼]
    Z --> AA[保存钓鱼记录]
    AA --> BB[获得积分奖励]
    BB --> CC[分享钓鱼成果]
    
    style M fill:#27AE60,stroke:#229954,color:#fff
    style V fill:#27AE60,stroke:#229954,color:#fff
    style BB fill:#F39C12,stroke:#E67E22,color:#fff
    style L fill:#E74C3C,stroke:#C0392B,color:#fff
    style U fill:#E74C3C,stroke:#C0392B,color:#fff
        </div>
        <div class="flow-description">
            <strong>核心特色：</strong>入场券采用数字化管理，通过二维码实现快速验证入场。结合钓鱼计时器和成果记录，为用户提供完整的钓鱼体验，同时通过积分奖励和社交分享增强用户粘性。
        </div>
    </div>

    <div class="flow-section">
        <div class="module-tag">商城业务</div>
        <h2>3. 渔具商城购物流程</h2>
        <div class="mermaid">
graph TD
    A[进入商城首页] --> B[浏览商品分类]
    B --> C[选择分类或搜索]
    C --> D[商品列表页]
    D --> E[选择商品]
    E --> F[商品详情页]
    F --> G[选择规格参数]
    G --> H{操作选择}
    
    H -->|立即购买| I[直接下单]
    H -->|加入购物车| J[添加到购物车]
    
    J --> K[继续购物或结算]
    K --> L{是否结算}
    L -->|继续购物| C
    L -->|去结算| M[购物车页面]
    
    M --> N[选择商品]
    N --> O[确认商品信息]
    O --> I
    
    I --> P[订单确认页]
    P --> Q[选择收货地址]
    Q --> R[选择配送方式]
    R --> S[选择支付方式]
    S --> T[确认订单信息]
    T --> U[提交订单]
    U --> V{支付结果}
    
    V -->|失败| W[支付失败]
    W --> S
    V -->|成功| X[支付成功]
    X --> Y[订单生成]
    Y --> Z[商家处理订单]
    Z --> AA[商品出库]
    AA --> BB[物流发货]
    BB --> CC[用户收到货物]
    CC --> DD[确认收货]
    DD --> EE[订单完成]
    EE --> FF[评价商品]
    
    style X fill:#27AE60,stroke:#229954,color:#fff
    style EE fill:#27AE60,stroke:#229954,color:#fff
    style W fill:#E74C3C,stroke:#C0392B,color:#fff
    style FF fill:#F39C12,stroke:#E67E22,color:#fff
        </div>
        <div class="flow-description">
            <strong>商城特色：</strong>专注渔具用品销售，提供丰富的商品分类和规格选择。完整的购物车、订单、物流、收货、评价闭环，为钓鱼爱好者提供一站式装备采购服务。
        </div>
    </div>

    <div class="flow-section">
        <div class="module-tag">社交业务</div>
        <h2>4. 沸点社区互动流程</h2>
        <div class="mermaid">
graph TD
    A[进入沸点页面] --> B[浏览动态列表]
    B --> C{选择操作}
    
    C -->|查看动态| D[点击动态详情]
    C -->|发布动态| E[点击发布按钮]
    C -->|互动操作| F[点赞/评论/分享]
    
    D --> G[查看完整内容]
    G --> H[查看评论列表]
    H --> I[参与评论]
    I --> J[发送评论]
    J --> K[评论成功]
    
    E --> L[选择发布类型]
    L --> M{内容类型}
    M -->|图文动态| N[添加文字内容]
    M -->|视频动态| O[录制或选择视频]
    
    N --> P[上传图片]
    O --> P
    P --> Q[添加位置信息]
    Q --> R[选择话题标签]
    R --> S[预览动态内容]
    S --> T[发布动态]
    T --> U[动态发布成功]
    U --> V[回到动态列表]
    
    F --> W{互动类型}
    W -->|点赞| X[点赞成功]
    W -->|评论| Y[输入评论内容]
    W -->|分享| Z[选择分享渠道]
    
    Y --> AA[发送评论]
    AA --> BB[评论成功]
    
    Z --> CC[分享到微信]
    CC --> DD[分享成功]
    
    X --> V
    BB --> V
    DD --> V
    K --> V
    
    style U fill:#27AE60,stroke:#229954,color:#fff
    style X fill:#E91E63,stroke:#C2185B,color:#fff
    style BB fill:#2196F3,stroke:#1976D2,color:#fff
    style DD fill:#FF9800,stroke:#F57C00,color:#fff
        </div>
        <div class="flow-description">
            <strong>社区价值：</strong>沸点社区是钓友交流分享的核心平台，用户可以发布钓鱼成果、经验分享、装备展示等内容。通过点赞、评论、分享等互动功能，构建活跃的钓鱼爱好者社区生态。
        </div>
    </div>

    <div class="flow-section">
        <div class="module-tag">会员业务</div>
        <h2>5. 会员体系与权益流程</h2>
        <div class="mermaid">
graph TD
    A[进入会员中心] --> B[查看当前会员状态]
    B --> C{会员状态}
    
    C -->|普通用户| D[显示会员权益介绍]
    C -->|已是会员| E[显示会员权益和到期时间]
    
    D --> F[选择会员套餐]
    F --> G{套餐类型}
    G -->|银卡会员| H[月卡/季卡/年卡]
    G -->|金卡会员| I[季卡/年卡]
    G -->|钻石会员| J[年卡/终身卡]
    
    H --> K[确认购买]
    I --> K
    J --> K
    
    K --> L[生成会员订单]
    L --> M[选择支付方式]
    M --> N[完成支付]
    N --> O{支付结果}
    
    O -->|失败| P[支付失败]
    P --> M
    O -->|成功| Q[会员开通成功]
    Q --> R[更新用户会员等级]
    R --> S[发放会员权益]
    
    S --> T[会员专享功能]
    T --> U{权益使用}
    U -->|入场券优惠| V[购买入场券享折扣]
    U -->|商城特权| W[商城商品会员价]
    U -->|积分倍数| X[钓鱼获得双倍积分]
    U -->|专属客服| Y[优先客服支持]
    U -->|社区特权| Z[动态置顶功能]
    
    E --> AA[续费提醒]
    AA --> BB{是否续费}
    BB -->|是| F
    BB -->|否| CC[会员到期]
    CC --> DD[权益失效]
    DD --> D
    
    style Q fill:#27AE60,stroke:#229954,color:#fff
    style S fill:#F39C12,stroke:#E67E22,color:#fff
    style P fill:#E74C3C,stroke:#C0392B,color:#fff
    style V fill:#9C27B0,stroke:#7B1FA2,color:#fff
    style W fill:#9C27B0,stroke:#7B1FA2,color:#fff
    style X fill:#9C27B0,stroke:#7B1FA2,color:#fff
        </div>
        <div class="flow-description">
            <strong>会员价值：</strong>分层会员体系提供差异化服务，包括入场券折扣、商城特权、积分倍数、专属客服等权益。通过会员服务增加用户粘性和平台收入，提升用户体验和忠诚度。
        </div>
    </div>

    <div class="flow-section">
        <div class="module-tag">钓鱼记录</div>
        <h2>6. 钓鱼计时与记录流程</h2>
        <div class="mermaid">
graph TD
    A[使用入场券入场] --> B[启动钓鱼计时器]
    B --> C[开始计时]
    C --> D[实时显示钓鱼时长]
    D --> E{钓鱼过程中}
    
    E -->|钓到鱼| F[记录鱼类信息]
    E -->|拍照记录| G[上传钓鱼照片]
    E -->|暂停计时| H[暂停计时器]
    E -->|继续钓鱼| D
    E -->|结束钓鱼| I[停止计时器]
    
    F --> J[选择鱼类种类]
    J --> K[输入鱼的重量]
    K --> L[保存鱼类记录]
    L --> D
    
    G --> M[选择照片]
    M --> N[添加照片描述]
    N --> O[保存照片记录]
    O --> D
    
    H --> P[暂停状态]
    P --> Q{用户操作}
    Q -->|继续钓鱼| R[恢复计时]
    Q -->|结束钓鱼| I
    R --> D
    
    I --> S[计算总钓鱼时长]
    S --> T[统计钓鱼成果]
    T --> U[生成钓鱼报告]
    U --> V{报告内容}
    
    V --> W[钓鱼时长统计]
    V --> X[鱼类数量统计]
    V --> Y[总重量统计]
    V --> Z[钓鱼照片集合]
    V --> AA[天气环境记录]
    
    U --> BB[计算获得积分]
    BB --> CC[保存钓鱼记录]
    CC --> DD[显示钓鱼成果]
    DD --> EE{用户选择}
    
    EE -->|分享成果| FF[发布到沸点社区]
    EE -->|查看历史| GG[查看历史记录]
    EE -->|再次钓鱼| HH[返回计时器]
    
    FF --> II[自动生成分享内容]
    II --> JJ[发布成功]
    
    style C fill:#2196F3,stroke:#1976D2,color:#fff
    style BB fill:#F39C12,stroke:#E67E22,color:#fff
    style DD fill:#27AE60,stroke:#229954,color:#fff
    style JJ fill:#E91E63,stroke:#C2185B,color:#fff
        </div>
        <div class="flow-description">
            <strong>记录价值：</strong>钓鱼计时器不仅记录时长，还能记录鱼类信息、照片、天气等丰富数据。通过数据分析为用户提供钓鱼成果统计，并可一键分享到社区，形成完整的钓鱼体验闭环。
        </div>
    </div>

    <div class="flow-section">
        <div class="module-tag">数据流转</div>
        <h2>7. 核心数据流转关系图</h2>
        <div class="mermaid">
graph TD
    A[用户注册登录] --> B[用户基础数据]
    B --> C[会员体系数据]
    B --> D[订单交易数据]
    B --> E[社交互动数据]
    B --> F[钓鱼行为数据]
    
    C --> G[会员权益计算]
    G --> H[优惠策略]
    H --> D
    
    D --> I[购买入场券]
    D --> J[购买商品]
    D --> K[购买会员]
    
    I --> L[入场券使用]
    L --> F
    F --> M[钓鱼记录生成]
    M --> N[积分奖励]
    N --> O[等级提升]
    
    M --> P[内容素材]
    P --> E
    E --> Q[社区内容]
    Q --> R[用户活跃度]
    R --> S[推荐算法]
    S --> T[个性化推送]
    
    J --> U[商品配送]
    U --> V[收货确认]
    V --> W[评价反馈]
    W --> E
    
    style B fill:#3498DB,stroke:#2980B9,color:#fff
    style N fill:#F39C12,stroke:#E67E22,color:#fff
    style Q fill:#E91E63,stroke:#C2185B,color:#fff
    style T fill:#9C27B0,stroke:#7B1FA2,color:#fff
        </div>
        <div class="flow-description">
            <strong>数据价值：</strong>用户在各个模块的行为数据相互关联，形成完整的数据生态。通过数据分析实现精准推荐、个性化服务、积分奖励等功能，提升用户体验和平台运营效率。
        </div>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                htmlLabels: true,
                curve: 'basis',
                useMaxWidth: true
            }
        });
    </script>
</body>
</html>
